<template>
  <!-- v-pagePermissions="pagePermissions"  -->
  <div class=" commonBoxmp">
    <!-- <el-scrollbar class="maxHeight">
      <div class="">
        <el-card class="">
          <div class="aic jca">
            <Card
              class="flex1 m20"
              title="访问数量"
              type="1"
              instructions="每个pc的数量"
            />
            <Card
              class="flex1 m20"
              title="成交额"
              type="2"
              instructions="每个pc的数量"
            />
            <Card
              class="flex1 m20"
              title="支付笔数"
              type="3"
              instructions="每个pc的数量"
            />
            <Card
              class="flex1 m20"
              title="运营活动效果"
              type="4"
              instructions="每个pc的数量"
            />
          </div>
        </el-card>
        <el-card class="mt20">
          <div class="aic jca">
            <h2>客户案例</h2>
            <h3>1 个</h3>
          </div>
        </el-card>
        <div class="jcb mt20">
          <el-card class="flex7">
            <template #header>
              <div class="card-header">
                <span>访问量</span>
              </div>
            </template>
            <div id="traffic"></div>
          </el-card>
          <el-card class="flex5 ml30">
            <template #header>
              <div class="card-header">
                <span>销售额</span>
              </div>
            </template>
            <div id="sales"></div>
          </el-card>
        </div>
      </div>
    </el-scrollbar> -->
    <EasyPrint />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Card from "/@/views/dashboard/analysis/card.vue";
import * as echarts from "echarts";

const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;
const router = useRouter();
const route = useRoute();


const state = reactive({
  data: { a: 1 },
});
const traffic = () => {
  var chartDom: any = document.getElementById("traffic");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["小程序", "移动端", "pc端"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },

    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["第一季度", "第二季度", "第三季度", "第四季度"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "小程序",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "移动端",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "pc端",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
    ],
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
const sales = () => {
  var chartDom: any = document.getElementById("sales");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "销量前五商品",
      subtext: "1月",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "商品名",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "手机" },
          { value: 735, name: "平板" },
          { value: 580, name: "台式机" },
          { value: 484, name: "智能手环" },
          { value: 300, name: "智能手表" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

onMounted(() => {
  setTimeout(() => {
    traffic();
    sales();
  }, 1000);
});
</script>

<style scoped lang="scss">
#traffic {
  height: 400px;
  width: 100%;
}
#sales {
  height: 400px;
  width: 100%;
}
</style>
